<template>
  <div class="card">
    <h2 class="mb-10">Element-Plus 内置过渡动画</h2>
    <div class="mb-10">
      <p class="mb-10">
        Fade 淡入淡出：提供 el-fade-in-linear 和 el-fade-in 两种效果。
        <el-button @click="example1 = !example1"> 尝试 </el-button>
      </p>
      <div class="flex">
        <Transition name="el-fade-in-linear">
          <div v-show="example1" class="transition-box">.el-fade-in-linear</div>
        </Transition>
        <Transition name="el-fade-in">
          <div v-show="example1" class="transition-box">.el-fade-in</div>
        </Transition>
      </div>
    </div>
    <div class="mb-10">
      <p class="mb-10">
        Zoom 缩放：提供 el-zoom-in-center，el-zoom-in-top 和 el-zoom-in-bottom 三种效果。
        <el-button @click="example2 = !example2"> 尝试 </el-button>
      </p>
      <div class="flex">
        <Transition name="el-zoom-in-center">
          <div v-show="example2" class="transition-box">.el-zoom-in-center</div>
        </Transition>

        <Transition name="el-zoom-in-top">
          <div v-show="example2" class="transition-box">.el-zoom-in-top</div>
        </Transition>

        <Transition name="el-zoom-in-bottom">
          <div v-show="example2" class="transition-box">.el-zoom-in-bottom</div>
        </Transition>
      </div>
    </div>
    <div class="mb-10">
      <p class="mb-10">
        Collapse 折叠面板：使用 el-collapse-transition 组件实现折叠展开效果。
        <el-button @click="example3 = !example3"> 尝试 </el-button>
      </p>
      <div class="flex">
        <el-collapse-transition>
          <div v-show="example3" style="height: 400px">
            <div class="transition-box">el-collapse-transition</div>
            <div class="transition-box">el-collapse-transition</div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <h2 class="mb-10">Animate.css 过渡动画</h2>
    <div class="mb-10">
      <p class="mb-10">
        <el-button @click="example4 = !example4"> 尝试 </el-button>
      </p>
      <div class="flex">
        <Transition
          enter-active-class="animate__animated animate__bounceIn"
          leave-active-class="animate__animated animate__bounceOut"
        >
          <div v-show="example4" class="transition-box">animate__bounce</div>
        </Transition>
      </div>
    </div>
    <div class="mb-10">
      <p class="mb-10">
        <el-button @click="example5 = !example5"> 尝试 </el-button>
      </p>
      <div class="flex">
        <Transition
          enter-active-class="animate__animated animate__backInDown"
          leave-active-class="animate__animated animate__backOutDown"
        >
          <div v-show="example5" class="transition-box">animate__back</div>
        </Transition>
      </div>
    </div>
  </div>
</template>

<script setup>
const example1 = ref(true)
const example2 = ref(true)
const example3 = ref(true)
const example4 = ref(true)
const example5 = ref(true)
</script>

<style lang="scss" scoped>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
